<template>
    <div class="adv">
        <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane v-for="v in remitList" :key="v.value" :label="v.label" :name="v.value">
            </el-tab-pane>
            <div class="remit-count">
                <div class="remit">
                    <div class="title">已售券(张)</div>
                    <div class="num">
                        <el-badge :value="9999" :max="10000" class="item"></el-badge>
                    </div>
                </div>
                <div class="remit">
                    <div class="title">已核销(张)</div>
                    <div class="num"><el-badge :value="100" :max="10000" class="item"></el-badge></div>
                </div>
                <div class="remit">
                    <div class="title">已核销金额(元)</div>
                    <div class="num"><el-badge :value="6792" :max="10000" class="item"></el-badge></div>
                </div>
                <div class="remit">
                    <div class="title">未核销(张)</div>
                    <div class="num"><el-badge :value="45" :max="10000" class="item"></el-badge></div>
                </div>
                <div class="remit">
                    <div class="title">未核销金额(元)</div>
                    <div class="num"><el-badge :value="10366145623" :max="10000" class="item"></el-badge></div>
                </div>
                <div class="remit">
                    <div class="title">已打款金额(元)</div>
                    <div class="num"><el-badge :value="342" :max="10000" class="item"></el-badge></div>
                </div>
                <div class="remit">
                    <div class="title">未打款金额(元)</div>
                    <div class="num"><el-badge :value="3413" :max="10000" class="item"></el-badge></div>
                </div>
            </div>
            <div class="app-container">
                <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
                    <el-form-item label="优惠券ID" prop="adsName">
                        <el-input v-model="queryParams.adsName" placeholder="请输入优惠券ID" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="优惠券名称" prop="adsName">
                        <el-input v-model="queryParams.adsName" placeholder="请输入优惠券名称" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="核销账号" prop="adsName">
                        <el-input v-model="queryParams.adsName" placeholder="请输入核销账号" clearable
                            @keyup.enter="handleQuery" />
                    </el-form-item>
                    <el-form-item label="打款状态" prop="canalName">
                        <el-select v-model="queryParams.canalFrom" placeholder="请选择打款状态" style="width:200px;">
                            <el-option v-for="item in remitStatusSel" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                        <el-button type="success" icon="Edit" @click="editQuery">批量修改</el-button>
                        <el-button icon="Upload" @click="uploadQuery">批量上传</el-button>
                    </el-form-item>
                </el-form>
                <el-table v-loading="loading" :data="remitListData" row-key="remitId"
                    @selection-change="handleSelectionChange" ref="multipleTable">
                    <el-table-column type="selection" width="55" :reserve-selection="true" :selectable="selectable" />
                    <el-table-column label="优惠券ID" align="center" prop="remitId" />
                    <el-table-column label="优惠券名称" align="center" prop="adsName"></el-table-column>
                    <el-table-column label="用户名称" align="center" prop="adsName"></el-table-column>
                    <el-table-column label="核销账号" align="center" prop="adsName"></el-table-column>
                    <el-table-column label="使用时间" align="center" prop="adsName"></el-table-column>
                    <el-table-column label="核销机构" align="center" prop="adsName"></el-table-column>
                    <el-table-column label="打款状态" align="center" prop="refundStatus">
                        <template #default="scope">
                            <el-tag :type="scope.row.refundStatus === 0 ? 'danger' : 'success'">{{
                                scope.row.refundStatus === 0 ? '未打款' : '已打款' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="打款凭证" align="center" prop="avatarImg">
                        <template #default="scope">
                            <image-preview :width="60" :height="60" :src="scope.row.avatarImg"
                                :preview-src-list="[scope.row.avatarImg]"></image-preview>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #default="scope">
                            <el-button link type="primary" size="small" icon="Edit" @click="handleUpdate(scope.row)"
                                v-hasPermi="['decor:order:edit']">修改</el-button>
                            <el-button link type="warning" size="small" icon="Delete" @click="handleDelete(scope.row)"
                                v-hasPermi="['decor:order:remove']">删除</el-button>
                            <el-button link type="primary" size="small" icon="Document" @click="handleDetail(scope.row)"
                                v-hasPermi="['decor:order:edit']">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getList(activeName)" />
            </div>
        </el-tabs>
        <!-- 批量上传 -->
        <el-dialog v-model="dialogVisible" title="批量上传打款凭证" width="600" center>
            <el-form ref="formRef" :model="form" :rules="rules" label-position="left" label-width="auto"
                class="demo-ruleForm platform-formList">
                <el-form-item label="打款凭证" prop="businessLicense">
                    <image-upload v-model="form.businessLicense" :limit="20"></image-upload>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="dialogConfirm">确 定</el-button>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
let activeName = sessionStorage.getItem('currentActiveName') || '0'
import { listRemit, updateRemit, delRemit } from "@/api/decor/remitMGT";
const router = useRouter();
const { adv_location } = proxy.useDict('adv_location')
const { status } = proxy.useDict('status')
// 多选数据
let selectionData = ref([])
// 选中数据的id
const ids = ref([]);
const remitList = ref([
    { value: '1', label: '全部' },
    { value: '2', label: '机构' },
    { value: '3', label: '材料商' }
])
// 打款状态
const remitStatusSel = ref([
    { value: 0, label: '平台' },
    { value: 1, label: '机构' },
    { value: 2, label: '材料商' }
])
// 表格数据
const remitListData = ref([
    { remitId: 1, refundStatus: 0 },
    { remitId: 2, refundStatus: 0 },
    { remitId: 3, refundStatus: 1 },
    { remitId: 4, refundStatus: 0 },
    { remitId: 5, refundStatus: 1 },
    { remitId: 6, refundStatus: 0 },
    { remitId: 7, refundStatus: 1 }
]);
// 遮罩层
const loading = ref(false);
// 显示搜索条件
const showSearch = ref(true);
// 总条数
const total = ref(0);
const dialogVisible = ref(false)
const data = reactive({
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        adsName: null,
        orderNum: null,
    },
    form: {},
    rules: { businessLicense: [{ required: true, message: "请上传打款凭证", trigger: "blur" }], }
});
const { queryParams, form, rules } = toRefs(data);

/** 查询广告列表 */
function getList(advLocation) {
    loading.value = true;
    const data = {
        ...queryParams.value,
        advLocation: advLocation
    }
    listRemit(data).then(response => {
        remitListData.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}
// getList('0')
const handleClick = (tab) => {
    sessionStorage.setItem('currentActiveName', tab.props.name)
    switch (tab.props.name) {
        case '1':
            getList('1')
            break;
        case '2':
            getList('2')
            break;
        case '3':
            getList('3')
            break;
        default:
            getList('1')
            break;
    }
}
/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList(activeName);
}

/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
}
// 默认禁止多选处理
const selectable = (row) => {
    if (row.refundStatus === 0) {
        return true
    } else {
        return false
    }
}
// 多选框选中数据
function handleSelectionChange(selection) {
    selectionData.value = selection
    ids.value = selection.map(item => item.remitId);
}
// 批量修改
const editQuery = () => {
    const _dis = ids.value;
    if (ids.value.length > 0) {
        proxy.$modal.confirm('是否确认将当前所选内容的打款状态修改为"已打款"？').then(function () {
            return updateRemit(_dis);
        }).then(() => {
            getList();
            proxy.$modal.msgSuccess("修改成功");
            ids.value = []
        }).catch(() => { });
    } else {
        proxy.$modal.msgError("请至少选择一项需要批量修改的数据项");
    }

}
// 批量上传
const uploadQuery = () => {
    if (ids.value.length > 0) {
        dialogVisible.value = true
    } else {
        proxy.$modal.msgError("请至少选择一项需要批量上传的数据项");
    }

}
/** 修改按钮操作 */
function handleUpdate(row) {
    router.push('/remitMGT/editRemit/'+ 1 +'/edit')
}
// 详情
const handleDetail = (row) => {
    router.push('/remitMGT/editRemit/'+ 1 +'/detail')
}
/** 删除按钮操作 */
function handleDelete(row) {
    const _remitIds = row.remitId;
    proxy.$modal.confirm('是否确认删除用户名称为"' + row.userName + '"的打款数据？').then(function () {
        return delRemit(_remitIds);
    }).then(() => {
        getList(activeName);
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => { });
}
// 弹框确定
const dialogConfirm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            updateRemit(form.value).then(response => {
                proxy.$modal.msgSuccess("上传成功");
                router.go(-1)
            });
        } else {
            proxy.$modal.msgError('请根据提示完善必填信息')
        }
    });
}
</script>
<style lang="scss" scoped>
.adv {
    margin: 20px;
}

::v-deep(.el-button--success) {
    background-color: #EF5A42;
    color: #ffffff;
    border-color: #EF5A42;
}

::v-deep(.el-checkbox__input.is-disabled .el-checkbox__inner) {
    border-color: transparent;
    background-color: transparent;
}

::v-deep(.el-checkbox__input.is-disabled .el-checkbox__inner::after) {
    box-sizing: content-box;
    content: "";
    border: 1px solid transparent;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
}
</style>